<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选练习</title>
</head>

<body>
    <form action="">
        你喜欢什么？<input type="checkbox" id="checkedAllbox">全选/全不选<br>
        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="篮球">篮球
        <input type="checkbox" name="items" value="排球">排球
        <input type="checkbox" name="items" value="乒乓球">乒乓球

        <br>

        <input type="button" id="checkedAllbtn" value="全选">
        <input type="button" id="checkedNobtn" value="全不选">
        <input type="button" id="checkedRevbtn" value="反选">
        <input type="button" id="sendbtn" value="提交">
    </form>
</body>

</html>